<template>
    <div class="crumb">
        <a-breadcrumb class="path">
            <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
                <span>{{ item.meta.title }}</span> /
            </a-breadcrumb-item>
        </a-breadcrumb>
        <div class="local">
            <div class="localName">{{currentObj.title }}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'crumb',
        data() {
            return {
                showAdd: false,
                breadList: [],
                currentObj:{},
            }
        },
        watch: {
            $route() {
                this.getCrumb()
            }
        },
        mounted() {
            this.getCrumb()
        },
        computed: {
            menuList () {
                return this.$store.state.app.menuList
            },
        },
        methods: {
            getCrumb() {
                this.breadList = []
                this.name = this.$route.path
              for (let k = 0; k < this.menuList.length; k++) {
                var n = this.menuList[k]
                if (n.children.length > 0) {
                  n.children.map((item) => {
                    if (this.name === item.path) {
                      this.currentObj = item
                    }
                  })
                }
              }
              if(JSON.stringify(this.currentObj) !== '{}'){
                let indexDot = this.currentObj.key.lastIndexOf('.')
                let curent = this.currentObj.key.substr(0, indexDot)
                if(curent === '0'){
                  curent = '7'
                }
                this.breadList = this.menuList.filter(item=>{return item.key === curent})
              }
            },
        }
    }
</script>
<style lang="less" scoped>
    .crumb {
        /*background: #fff;
        padding: 15px 25px;
        margin-bottom: 15px;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);*/
        width: 100%;
        height: 35px; overflow: hidden;
        color: #a3a8b4;
    }
    .path {
        color: #a3a8b4;
        margin-bottom: 20px;
        display: inline-block;
        float: left;
        div {
            display: inline-block;
            span {
                margin-right: 10px;
            }
        }
    }
    .localName {
        font-size: 16px;
        color: #464d5b; margin-left: 5px;
    }

    .local {
        float: left;
    }
</style>
